<template>
  <div>
    <!--页面区域-->
    <div class="page-view">
      <div class="table-operations">
        <a-space>
          <!--          <a-button type="primary" @click="handleAdd">模拟新增</a-button>-->
          <a-button @click="handleBatchDelete">批量删除</a-button>
        </a-space>
      </div>
      <a-table
        size="middle"
        rowKey="id"
        :loading="data.loading"
        :columns="columns"
        :data-source="data.dataList"
        :scroll="{ x: 'max-content' }"
        :row-selection="rowSelection"
        :pagination="{
          size: 'default',
          current: data.page,
          pageSize: data.pageSize,
          onChange: (current) => (data.page = current),
          showSizeChanger: false,
          showTotal: (total) => `共${total}条数据`,
        }"
      >
        <template #bodyCell="{ text, record, index, column }">
          <template v-if="column.key === 'status'">
            <!-- <a-tag :color="text === '1' ? '#2db7f5' : '#87d068'">
              {{ text === '1' ? '正常' : '已取消' }}
            </a-tag> -->
            <!-- <a-tag v-if="text === 1" color="#2db7f5">正常</a-tag>
            <a-tag v-else-if="text === 6" color="#FFFACD">申请取消</a-tag>
            <a-tag v-else-if="text === 7" color="#87d068">已取消</a-tag> -->

            <a-tag :color="text === '1' ? '#2db7f5' : text === '6' ? '#DAA520' : text === '7' ? '#87d068' :text === '8' ? '#7D26CD': ''">
              {{ text === '1' ? '正常' : text === '6' ? '申请取消' : text === '7' ? '已取消' : text === '8' ? '已完成' : text }}   
            </a-tag>         
          </template>


          <template v-if="column.key === 'checkIn'">
            <!-- <a-tag :color="text === 0 ? '#2db7f5' : '#87d068'">
              {{ text === 0 ? '未入住' : '已预订' }}
            </a-tag> -->
            <a-tag v-if="text === 0" color="#FF0000">未入住</a-tag>
            <a-tag v-else-if="text === 1" color="#008000">已预订</a-tag>
            <a-tag v-else-if="text === 2" color="#FF8C00">已入住</a-tag>
          </template>

          <template v-if="column.key === 'operation'">
            <span>
              <a-popconfirm title="确定取消?" ok-text="是" cancel-text="否" @confirm="confirmCancel(record)">
                <a>取消</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a-popconfirm title="确定删除?" ok-text="是" cancel-text="否" @confirm="confirmDelete(record)">
                <a>删除</a>
              </a-popconfirm>
            </span>

            <a-divider type="vertical" />
            <span>
              <a-popconfirm title="确定入住?" ok-text="是" cancel-text="否" @confirm="confirmCheck(record)">
                <a>入住</a>
              </a-popconfirm>
              <a-divider type="vertical" />
              <a-popconfirm title="确定退房?" ok-text="是" cancel-text="否" @confirm="confirmOut(record)">
                <a>退房</a>
              </a-popconfirm>
            </span>


          </template>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
  import { message } from 'ant-design-vue';
  import { listApi, deleteApi, cancelApi, checkApi, outApi } from '/@/api/order';
  import * as utils from "../../utils";

  const columns = reactive([
    {
      title: '序号',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '用户',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
    },
    {
      title: '民宿名称',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      align: 'center',
      scopedSlots: { customRender: 'status' },
    },
    {
      title: '客户姓名',
      dataIndex: 'receiverName',
      key: 'receiverName',
      align: 'center',
    },
    {
      title: '电话',
      dataIndex: 'receiverPhone',
      key: 'receiverPhone',
      align: 'center',
    },
    {
      title: '预订日期',
      dataIndex: 'receiverTime',
      key: 'receiverTime',
      align: 'center',
    },
    {
      title: '房间状态',
      dataIndex: 'checkIn',
      key: 'checkIn',
      align: 'center',
    },
    {
      title: '操作',
      dataIndex: 'action',
      key: 'operation',
      align: 'center',
      fixed: 'right',
      // width: 120,
    },
  ]);

  // 页面数据
  const data = reactive({
    dataList: [],
    loading: false,
    keyword: '',
    selectedRowKeys: [],
    pageSize: 10,
    page: 1,
  });

  onMounted(() => {
    getDataList();
  });

  const getDataList = () => {
    data.loading = true;
    listApi({
      keyword: data.keyword,
    })
      .then((res) => {
        data.loading = false;
        console.log(res);
        res.data.forEach((item, index) => {
          item.index = index + 1;
          item.orderTime = utils.getFormatTime(item.orderTime, true)
        });
        data.dataList = res.data;
      })
      .catch((err) => {
        data.loading = false;
        console.log(err);
      });
  };

  const rowSelection = ref({
    onChange: (selectedRowKeys, selectedRows) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      data.selectedRowKeys = selectedRowKeys;
    },
  });

  const confirmCancel = (record) => {
    cancelApi({ id: record.id })
      .then((res) => {
        getDataList();
        message.success('取消成功');
      })
      .catch((err) => {
        message.error(err.msg || '操作失败');
      });
  };

  const confirmDelete = (record) => {
    console.log('delete', record);
    deleteApi({ ids: record.id })
      .then((res) => {
        getDataList();
      })
      .catch((err) => {
        message.error(err.msg || '操作失败');
      });
  };

  const handleBatchDelete = () => {
    console.log(data.selectedRowKeys);
    if (data.selectedRowKeys.length <= 0) {
      console.log('hello');
      message.warn('请勾选删除项');
      return;
    }
    deleteApi({ ids: data.selectedRowKeys.join(',') })
      .then((res) => {
        message.success('删除成功');
        data.selectedRowKeys = [];
        getDataList();
      })
      .catch((err) => {
        message.error(err.msg || '操作失败');
      });
  };













  const confirmCheck = (record) => {
    checkApi({ id: record.id })
      .then((res) => {
        getDataList();
        message.success('入住成功');
      })
      .catch((err) => {
        message.error(err.msg || '操作失败');
      });
  };

  const confirmOut = (record) => {
    outApi({ id: record.id })
      .then((res) => {
        getDataList();
        message.success('退房成功');
      })
      .catch((err) => {
        message.error(err.msg || '操作失败');
      });
  };




</script>







<style scoped lang="less">
  .page-view {
    min-height: 100%;
    background: #fff;
    padding: 24px;
    display: flex;
    flex-direction: column;
  }

  .table-operations {
    margin-bottom: 16px;
    text-align: right;
  }

  .table-operations > button {
    margin-right: 8px;
  }
</style>
